<template>
	<view class="ccontainer">
		<!-- 搜索 -->
		<view class="indexNav cflex cflex_row cflex_between cflex_items" :style="{paddingTop:statusBarHeight + 27 + 'rpx'}">
			<view class="indexNav-left cflex cflex_row cflex_items" @click="turnPage">
				<image class="indexNav-leftImage" src="/static/clq-image/index-search-icon.png" mode=""></image>
				<view style="font-size: 28rpx;color: #555;">{{search}}</view>
			</view>
			
			<image class="indexNav-rightImage" src="/static/clq-image/search-add.png" mode="" @click="turnForm" data-type="1"></image>
		</view>
		<view class="pageBlock cflex cflex_col" :style="{paddingTop:statusBarHeight + 100 + 'rpx'}">
			<view v-if="list.length == 0" class="cflex cflex_col cflex_center cflex_items">
				<image style="width: 358rpx;height: 266rpx;margin-top: 400rpx;" src="/static/clq-image/search-noList.png" mode=""></image>
			</view>
			<block v-else v-for="(item,index) in list" :key="index">
				<view class="againItem cflex cflex_col cflex_between" @click="turnForm" data-type="5" :data-spec_id="item.spec_id">
					<view style="padding-right: 20rpx;" class="cflex cflex_row cflex_between">
						<image style="width: 270rpx;height: 246rpx;" :src="item.images[0]" mode=""></image>
						<view style="width: 373rpx;" class="cflex cflex_col cflex_1">
							<view class="againItem-name">{{item.name}}</view>
							<view class="againItem-type_name">{{item.type_name}}</view>
							<view class="againItem-factory_price">出厂价：{{item.factory_price}}元</view>
							<view class="againItem-sale">成交量：{{item.sale}}件</view>
							<view class="againItem-num">起订量：{{item.num}}件</view>
						</view>
					</view>
					<view class="againItem-btn cflex cflex_row cflex_center cflex_items" @click="turnForm" data-type="4" :data-good_id="item.good_id">我要报价</view>
				</view>
			</block>
		</view>
		<view v-if="modelStatus" class="mask" @click="turnForm" data-type="0"></view>
		<view v-if="modelStatus" class="modelDialog" :style="{top:statusBarHeight + 100 + 'rpx'}">
			<view v-if="classType == 1 || classType == 3 || classType == 4" class="modelItem cflex cflex_row cflex_center cflex_items" @click="turnForm" data-type="2">发布商品</view>
			<view v-if="classType == 2 || classType == 3 || classType == 4" class="modelItem cflex cflex_row cflex_center cflex_items" @click="turnForm" data-type="3">发布询价</view>
		</view>
	</view>
</template>

<script>
	import {
		ajax
	} from '../../ajax.js';
	export default {
		data() {
			return {
				statusBarHeight:'',
				search: '',
				list:[],
				firstNum: 1,
				num: 10,
				isLoading: true, //是否可滚动
				isMore: true, //是否有数据
				nomore: '',
				getmore: '',
				classType:'',
				modelStatus:false
			}
		},
		onShow:function(){
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					console.log(res)
					let screenHeight = parseFloat(res.screenHeight * 2)
					let statusBarHeight = parseFloat(res.statusBarHeight * 2)
					that.statusBarHeight = statusBarHeight
					that.Height = screenHeight - statusBarHeight
					console.log('that.Height', that.Height)
				}
			})
			that.classType = uni.getStorageSync('class')
		},
		onLoad: function(opt) {
			let that = this
			that.search = opt.search
			console.log('that.search', that.search)
			that.getList()
		},
		methods: {
			turnForm(e){
				let that = this
				let type = e.currentTarget.dataset.type
				if(type==0){
					that.modelStatus = false
				}else if(type ==1){
					that.modelStatus = true
				}else if(type ==2){
					uni.navigateTo({
						url:"/pages/releasePro/releasePro"
					})
				}else if(type ==3){
					uni.navigateTo({
						url:"/pages/release/release"
					})
				}else if(type ==4){
					let id = e.currentTarget.dataset.good_id
					uni.navigateTo({
						url:"/pages/release3/release3?id=" + id + '&type=' + 4
					})
				}else if(type == 5){
					let id = e.currentTarget.dataset.spec_id
					uni.navigateTo({
						url:"/pages/detailPro/detailPro?id=" + id
					})
				}
			},
			turnPage(){
				let that = this
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; //上一个页面 
				//接调用上一个页面的setData()方法，把数据存到上一个页面中
				prevPage.$vm.search = that.search
				uni.navigateBack();
			},
			getList() {
				let that = this
				// uni.showLoading({
				// 	title: "加载中"
				// })
				that.list = []
				ajax({
					url: 'goods/goodsList',
					data: {
						token: uni.getStorageSync('token'),
						search: that.search,
						firstNum: that.firstNum,
						num: that.num
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: 'POST',
					success: function(res) {
						// uni.hideLoading()
						let result = res.data.data
						console.log('result', result);
						if (res.data.code == 1) {
							let list = result.goods.list
							if (that.firstNum == 1) {
								if (list.length != 0) {
									that.list = list
									// console.log('that.list',that.list)
								}
							} else {
								let listItem = list
								if (listItem.length != 0) {
									that.list = that.list.concat(listItem)
								}
							}
							console.log('that.list', that.list);

							let total = result.goods.total;
							that.last_page = result.goods.last_page;

							if (total == 0) {
								that.isLoading = true; //是否可滚动
								that.isMore = true; //是否有数据
								that.nomore = '暂无相关内容~';
								that.getmore = '';
							} else {
								that.isLoading = false; //是否可滚动
								that.isMore = false; //是否有数据
								that.nomore = '暂无相关内容~';
								that.getmore = '';
							}
							if (that.firstNum < that.last_page) {
								that.isLoading = false; //是否可滚动
								that.isMore = false; //是否有数据
								that.nomore = '没有更多内容了~';
								that.getmore = '';
							} else if ((that.firstNum = that.last_page)) {
								that.isLoading = true; //是否可滚动
								that.isMore = true; //是否有数据
								that.nomore = '没有更多内容了~';
								that.getmore = '';
							} else {
								that.isLoading = true; //是否可滚动
								that.isMore = true; //是否有数据
								that.nomore = '没有更多内容了~';
								that.getmore = '';
							}
						} else if (res.data.code == 0) {
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						} else if (res.data.code == -1) {
							uni.reLaunch({
								url: '/pages/clq_login/clq_login'
							})
						} else if (res.data.code == -2) {
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						}
					},
					error: function() {
						uni.showToast({
							title: res.data.msg,
							duration: 1500,
							icon: 'none'
						});
					}
				});
			},
			onPullDownRefresh() {
				let that = this;
				uni.showLoading({
					title: '努力刷新中',
				})
				that.firstNum = 1
				that.getList()
				// 加载完成后，停止加载
				setTimeout(function() {
					uni.hideNavigationBarLoading() //完成停止加载
					uni.stopPullDownRefresh() //停止下拉刷新
					uni.hideLoading(); //隐藏加载框
				}, 1500);
			},
			onReachBottom() {
				let that = this;
				console.log(111);
				uni.showLoading({
					title: '努力加载中'
				});
				if (that.firstNum < that.last_page) {
					that.firstNum = that.firstNum + 1;
					that.isLoading = false; //是否可滚动
					that.isMore = false; //是否有数据
					that.nomore = '没有更多内容了~';
					that.getmore = '';
					that.getListItem();
					uni.hideLoading();
				} else if ((that.firstNum = that.last_page)) {
					that.isLoading = true; //是否可滚动
					that.isMore = true; //是否有数据
					that.nomore = '没有更多内容了~';
					that.getmore = '';
					uni.hideLoading();
				} else {
					that.isLoading = true; //是否可滚动
					that.isMore = true; //是否有数据
					that.nomore = '没有更多内容了~';
					that.getmore = '';
					uni.hideLoading()
				}
			}
		}
	}
</script>

<style>
	/* 搜索 */
	.indexNav {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx 25rpx 50rpx;
		background-color: #fff;
		position: fixed;
		top: 0;
	}
	
	.indexNav-rightImage {
		width: 42rpx;
		height: 42rpx;
	}
	
	.indexNav-left {
		width: 580rpx;
		height: 56rpx;
		background: #f7f7f7;
		border-radius: 28rpx;
	}
	
	.indexNav-leftImage {
		width: 38rpx;
		height: 38rpx;
		margin: 0 33rpx 0 19rpx;
	}
	
	/* ========================================== */
	.pageBlock{
		width: 100%;
		box-sizing: border-box;
		padding: 5rpx 20rpx 20rpx 20rpx;
	}
	
	.againItem{
		width: 100%;
		box-sizing: border-box;
		height: 310rpx;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0px 1rpx 10rpx 0rpx rgba(153,153,153,0.35);
		margin-top: 25rpx;
	}
	.againItem image{
		width: 270rpx;
		height: 246rpx;
		background: #005e15;
		border-radius: 20rpx 20rpx 0px 0px;
		margin-right: 41rpx;
	}
	.againItem-name{
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		margin-top: 20rpx;
	}
	.againItem-type_name{
		font-size: 24rpx;
		font-weight: 500;
		color: #555555;
		margin: 10rpx 0 10rpx 0;
	}
	.againItem-factory_price{
		font-size: 28rpx;
		font-weight: 500;
		color: #d50000;
	}
	.againItem-sale{
		font-size: 24rpx;
		font-weight: 500;
		color: #999;
		margin: 10rpx 0;
	}
	.againItem-num{
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
	}
	
	.againItem-btn{
		width: 710rpx;
		height: 62rpx;
		background: #ff7427;
		border-radius: 0px 0px 20rpx 20rpx;
		font-size: 28rpx;
		color: #fff;
	}
	
	.mask {
	  width: 100%;
	  height: 100%;
	  position: fixed;
	  top: 0;
	  left: 0;
	  background: #fff;
	  opacity: 0;
	  overflow: hidden;
	  z-index:99;
	}
	.modelDialog{
	    width: 100rpx;
		height: auto;
	    position: fixed;
	    right: 20rpx;
	    z-index: 999;
	    background-color: #fff;
	    box-shadow:0 0 9rpx 0 rgba(128,128,128,0.5);
		padding: 10rpx;
		color: #555555;
		font-size: 24rpx;
	}
	.modelItem{
		height: 50rpx;
	}
</style>
